import Button from "@/components/Button";
import DesignExampleImage1 from '@/assets/images/design-example-1.png';
import DesignExampleImage2 from '@/assets/images/design-example-2.png';
import Image from "next/image";
import Pointer from "@/components/Pointer";

export default function Hero() {
    return (
        <section className="py-24 overflow-x-clip">
            <div className="container relative">
                <div className="absolute hidden lg:block -left-32 top-16">
                    <Image src={DesignExampleImage1} alt="Design Example Image 1" />
                </div>
                <div className="absolute hidden lg:block -right-64 top-16">
                    <Image src={DesignExampleImage2} alt="Design Example Image 2" />
                </div>
                <div className="absolute hidden lg:block left-56 top-96">
                    <Pointer name='Andrea' />
                </div>
                <div className="absolute hidden lg:block right-80 -top-4">
                    <Pointer name='Bryan' color="red" />
                </div>
                <div className="flex justify-center items-center">
                    <div className="px-3 py-1 inline-flex text-neutral-950 font-semibold bg-gradient-to-r from-purple-400 to-pink-400 rounded-full">
                        ✨ $7.5M seed round raised
                    </div>
                </div>
                <h1 className="mt-6 text-6xl md:text-7xl lg:text-8xl font-medium text-center">Impactful design, created effortlessly</h1>
                <p className="mx-auto mt-8 max-w-2xl text-center text-white/50 text-xl">
                    Design tools shouldn&apos;t slow you down. Layers combines powerful features with an intutive interface that keeps you in your creative flow.
                </p>
                <form className="mx-auto mt-8 p-2 max-w-lg flex border border-white/15 rounded-full">
                    <input type="email" placeholder="Enter your email" className="px-4 w-full md:flex-1 bg-transparent" />
                    <Button type="submit" variant="primary" size="sm" className="whitespace-nowrap">Sign Up</Button>
                </form>
            </div>
        </section>
    );
}
